<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端培训第五期</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .a{
            position: relative;
            width: 375px;
            height: 667px;
            background: #007aff;
            margin: 0 auto;
        }
        .b{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 200px;
            height: 100px;
            background: #FF0000;
            border-radius: 2%;
            border: 5px solid white;
            /*box-shadow: 10px 10px 5px lightcyan inset;*/
            z-index: 1000;
        }
        .c{
            position: absolute;
            left: 30px;
            top: 30px;
            width: 200px;
            height: 100px;
            background: #ffff00;
            border-radius: 15px;
            border: 5px solid white;
            /*box-shadow: 10px 10px 5px lightcyan inset;*/
            z-index: 500;
        }
        .d{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 100px;
            background: #140303;
            border-radius: 15px;
            border: 5px solid white;
            /*box-shadow: 10px 10px 5px lightcyan inset;*/
            z-index: 100;
        }
        .button1{
            background: red;
            color: white;
        }
        .mask{
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            /*width: 100%;*/
            /*height: 100%;*/
            opacity: 0.5;
            background: black;
            z-index: 100;
        }
        .alert{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 100px;
            background: white;
            z-index: 200;
        }
        label{
            background: #00FF00;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
        <!--<div class="c"></div>-->
        <!--<div class="d"></div>-->
        <!--<div class="mask"></div>-->
        <!--<div class="alert">-->
            <!--<label>你好啊！！！</label>-->
        <!--</div>-->
        <!--<button class="button1" onclick="tap(this)">按钮一</button>-->
        <!--<button class="button1" onclick="tap('按钮二')">按钮二</button>-->
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $('.mask,.alert').hide();
    });
    var tap = function (text) {
        console.log(text)
        $('.mask,.alert').show().find('label').html(text);
        $('.mask,.alert').show().find('label').after(text);
    }
    $('.mask,.alert').click(function () {
        $('.mask,.alert').hide();
    });
</script>